<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link href="/static/css/ui-dialog.css" rel="stylesheet">
	<script src="/static/js/jquery-1.10.2.js"></script>
	<script src="/static/js/Particleground.js"></script>
	<script src="/static/js/dialog-min.js"></script>
	<style>
		body,html{background: #16a085;height: 100%;overflow: hidden;}
		@font-face {
		    font-family: 'adminthemesregular';
		    src: url('/static/font/adminthemes-webfont.eot');
		    src: url('/static/font/adminthemes-webfont.eot?#iefix') format('embedded-opentype'),
		         url('/static/font/adminthemes-webfont.woff2') format('woff2'),
		         url('/static/font/adminthemes-webfont.woff') format('woff'),
		         url('/static/font/adminthemes-webfont.ttf') format('truetype'),
		         url('/static/font/adminthemes-webfont.svg#adminthemesregular') format('svg');
		    font-weight: normal;
		    font-style: normal;
		}
		.register-box{
			width:300px;
			height:auto;
			margin:10% auto;
			padding:40px;
			box-shadow:0 -15px 30px #0d957a;
			border-radius:5px;
		}
		.register-box p.title{
			font-size:23px;
			font-weight: bold;
			text-align: center;
			color:#45bda6;
			text-shadow:0 0 1px #0e947a;
			margin-bottom:30px;
		}
		.register-box p{position: relative;}
		.register-box p::before{
			font-family: 'adminthemesregular';
			position:absolute;
			top:0;
			left:10px;
			height:42px;
			line-height: 42px;
			font-size:20px;
			color:#0c9076;
		}
		.register-box p.usericon::before{
			content:"u";
		}
		.register-box p.passicon::before{
			content:"p";
		}
		.register-box p.passiconagain::before{
			content:"p";
		}
		canvas{position: absolute;}
		.register-box input{
			font-size: 16px;
			height:26px;
			width:90%;
			border:none;
			padding:8px 5%;
			background:#5cbdaa;
			color:white;
			text-indent:2em;
		}
		.register-box input::-webkit-input-placeholder{
			color:#f4f4f4;
			line-height:inherit;
		}
		.register-box input::-moz-placeholder{
			color:#f4f4f4;
			line-height:inherit;
		}
		.register-box input.submit-btn{
			width:100%;
			height: 42px;
			font-size: 16px;
			background:#048f74;
			color:#f8f8f8;
			text-indent:0;
		}
		.register-box input.submit-btn:hover{
			background:#0c9076;
			color:#f4f4f4;
		}
	</style>
	<script>
		$(function(){
			$('body').particleground({
				dotColor: '#5cbdaa',
    			lineColor: '#5cbdaa'
			});

			$("form").submit(function (){
				var name = $("input[name='username']").val();
				var cpassword =$("input[name='password']").val();
				var password = $("input[name='passwordagain']").val();
				var name_length = $("input[name='username']").val().length;
				var password_length =$("input[name='password']").val().length;
				var error_name=false;

				if(name == '' || password == ''||passwordagain ==''){
					dialog({
						title:"注册验证",
						content:'<p style="font-size:15px;">用户名或密码不能为空，请重新输入！</p>',
						okValue:"确定",
						ok:function(){},
					}).showModal();
					return false;
				}else if(password!=cpassword){
					dialog({
						title:"注册验证",
						content:'<p style="font-size:15px;">您两次输入密码不一致,请重新输入</p>',
						okValue:"确定",
						ok:function(){},
					}).showModal();
					return false;
				}else if(name_length<5||name_length>20){
					dialog({
						title:"注册验证",
						content:'<p style="font-size:15px;">您账号长度不正确</p>',
						okValue:"确定",
						ok:function(){},
					}).showModal();
					return false;
				}else if(password_length<8||password_length>20)
				{
					dialog({
						title:"注册验证",
						content:'<p style="font-size:15px;">您密码长度不正确</p>',
						okValue:"确定",
						ok:function(){},
					}).showModal();
					return false;
				}else{
					return true;
				}
			});
		});
	</script>
</head>
<body>
	<div class="register-box">
		<p class="title">智慧睡眠监护平台</p>
		<form action="" method="POST">
			{%csrf_token%}
			<p class="usericon">
				<input type="text" placeholder="用户名（5位-20位）"  value="{{uname}}" name="username" id="username">
			</p>
			<p class="passicon">
				<input type="password" placeholder="密码（8位-20位）" value="{{upwd}}"  name="password" id="password">
			</p>
			<p class="passiconagain">
				<input type="password" placeholder="确认密码" value="{{cupwd}}"  name="passwordagain" id="passwordagain">
			</p>
			{{error_name}}
			<p>
				<input type="submit"  value="立即注册" class="submit-btn">
			</p>
		</form>
	</div>
</body>
</html>